<script setup>
// ref：让数据具备响应式,需要加 .value
// reactive：让引用类型的数据具备响应式，不需要加 .value
// readonly: 只读的数据，当值改变的时候会有一个提示
// computed: 计算属性
// 
import { ref, reactive, readonly, computed, watch } from 'vue'

const price = ref(100)


// 侦听器
watch(price, (newVal, currentVal) => {
    // console.log(newVal, currentVal);
    console.log(document.querySelector('h2').innerText);
}, {
    // immediate: true // 配置立即执行一次，非惰性
    // deep: true // 深度监听，可以监听到对象里面的属性，
    // 非必要不要使用,如果对象嵌套多层，开销大
    // once: true // 只监听一次
    flush:"" // 设置等待真实 DOM 更新之后再回调监听函数，有post，sync，pre
})

</script>

<template>
    <h1>组合式 API</h1>
    <h2>
        {{ price }}
    </h2>
    <button @click="price++">修改</button>

</template>
